// 扩展vue原有的功能：全局组件，自定义指令，挂载原型方法，注意：没有全局过滤器。
// 这就是插件
// vue2.0插件写法要素：导出一个对象，有install函数，默认传入了Vue构造函数，Vue基础之上扩展
// vue3.0插件写法要素：导出一个对象，有install函数，默认传入了app应用实例，app基础之上扩展

import defaultImg from '@/assets/images/200.png'

import Message from './Message.js'
// 用于实现自动化导入模块
// 参数一: 需要自动化导入文件的路径
// 参数二: 表示是否加载子目录的文件 false表示不加载子目录的文件
// 参数三: 表示匹配文件的规则 正则
const importFn = require.context('./', false, /\.vue$/)

// 自定义全局指令
const defineDirective = (app) => {
  // 图片懒加载指令
  app.directive('lazyload', {
    mounted (el, bindings) {
      // el表示绑定指令的DOM元素
      // bindings表示指令相关的信息(bindings.value表示指令的值)
      // 1. 判断该图片是否出现在可视区
      const observer = new IntersectionObserver(([{ isIntersecting }]) => {
        if (isIntersecting) {
          // 图片进入了可视区：
          // 2. 控制图片的显示，其实就是给图片DOM元素的src属性赋值图片的路径
          el.src = bindings.value
          // 取消图片的监听
          observer.unobserve(el)
          // 处理图片加载失败的情况:显示默认图片即可
          el.onerror = () => {
            el.src = defaultImg
          }
        }
      }, {
        // 图片进入可视区的高度 1%
        threshold: 0.01
      })
      // 监听图片进入可视区
      observer.observe(el)
    }
  })
}

export default {
  install (app) {
    // 批量自动化导入并配置全局组件
    importFn.keys().forEach(cpath => {
      // 导入组件
      // cpath表示单个vue组件文件的路径
      const component = importFn(cpath).default
      // 定义全局组件
      app.component(component.name, component)
    })
    // 定义指令
    defineDirective(app)

    // 向Vue的全局挂载了一个方法
    app.config.globalProperties.$message = Message
    // 如果组件内部可以使用this，那么可以通过this.$message()调用
    // import Message from '@/components/library/Message'
    // Message({type: 'success', text: '登录成功'})
  }
}
